{% extends "base.html" %}
{% block stylesheets %}
{% endblock %}
{% block content %}
<div class="uk-section uk-section-muted uk-section-large">
    <div class="uk-container uk-container-medium uk-text-center">
        <h1 class='uk-heading-primary'>Teams</h1>
    </div>
</div>
<div class="uk-section uk-section-secondary">
    <div class="uk-container uk-container-medium uk-text-center">
        <table id='teams' class="uk-table uk-table-hover uk-table-striped">
            <thead>
                <tr>
                    <td uk-tooltip="title: Sort; delay: 500" style="cursor: pointer;" onclick="sortTable(0)" class='uk-text-center uk-text-large'>Team</td>
                    <td uk-tooltip="title: Sort; delay: 500" style="cursor: pointer;" onclick="sortTable(1)" class='uk-text-center uk-text-large'>Affiliation</td>
                    <td uk-tooltip="title: Sort; delay: 500" style="cursor: pointer;" onclick="sortTable(2)" class='uk-text-center uk-text-large'>Website</td>
                    <td uk-tooltip="title: Sort; delay: 500" style="cursor: pointer;" onclick="sortTable(3)" class='uk-text-center uk-text-large'>Country</td>
                </tr>
            </thead>
            <tbody>
                {% for team in teams %}
                <tr>
                    <td>
                        {% if scores_visible() %}
                        <a href="{{ url_for('teams.public', team_id=team.id) }}">
                            {{ team.name | truncate(50) }}
                        </a>
                        {% else %}
                        <span>{{ team.name | truncate(50) }}</span>
                        {% endif %}
                        {% if team.oauth_id %}
                        <a href="https://majorleaguecyber.org/u/{{ team.name }}">
                            <span class="badge badge-primary">Official</span>
                        </a>
                        {% endif %}
                    </td>
                    <td class="uk-text-center">
                        {% if team.affiliation %}
                        {% if team.affiliation | length > 50 %}
                        <span uk-tooltip="title: {{ team.affiliation }}">
                            {% if team.affiliation %}{{ team.affiliation | truncate(50) }}{% endif %}
                        </span>
                        {% else %}
                        <span>
                            {% if team.affiliation %}{{ team.affiliation | truncate(50) }}{% endif %}
                        </span>
                        {% endif %}
                        {% endif %}
                    </td>
                    <td class="uk-text-center">
                        {% if team.website and (team.website.startswith('http://') or team.website.startswith('https://')) %}
                        <a class='uk-link' href="{{ team.website }}" target="_blank">
                            {{ team.website | truncate(20) }}
                        </a>
                        {% endif %}
                    </td>
                    <td class="uk-text-center">
                        <span>{% if team.country %}{{ lookup_country_code(team.country) }}{% endif %}</span>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% if pages > 1 %}
        <hr>
        <div class="uk-text-center">
            <p>Page</p>
            <ul class="uk-pagination uk-flex-center" uk-margin>
                {% if curr_page != 1 %}
                <li><a class='uk-text-large' href="{{ url_for('teams.listing', page=curr_page - 1) }}"><span uk-pagination-previous></span></a></li>
                {% endif %}
                {% for page in range(1, pages + 1) %}
                {% if curr_page != page %}
                <a class='uk-text-large' href="{{ url_for('teams.listing', page=page) }}">{{ page }}</a>
                {% else %}
                <li class="uk-active"><span class='uk-text-large'>{{page}}</span></li>
                {% endif %}
                {% endfor %}
                {% if curr_page != pages %}
                <a class='uk-text-large' href="{{ url_for('teams.listing', page=curr_page + 1) }}">><span uk-pagination-next></span></a>
            </ul>
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}
{% block scripts %}
<script>
function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("teams");
    switching = true;
    dir = "asc";
    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 1; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("TD")[n];
            y = rows[i + 1].getElementsByTagName("TD")[n];
            if (dir == "asc") {
                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            } else if (dir == "desc") {
                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchcount++;
        } else {
            if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
}
</script>
{% endblock %}